<!--  -->
<template>
  <div class="editable-cell" :class="required ? 'requiredFormItem' : ''">
    <a-select :value="currentValue" style="width: 100%;" @change="handleChange" :placeholder="disabled ? '' : '请选择'" :disabled="disabled" :getPopupContainer="getPopupContainer">
      <a-select-option :value="item.value" v-for="item in options" :key="item.value"> {{ item.label }} </a-select-option>
    </a-select>
  </div>
</template>

<script>
export default {
  name: 'EditableSelect',
  props: {
    text: [String, Number],
    disabled: {
      type: Boolean,
      defalut: false
    },
    required: {
      type: Boolean,
      defalut: false
    },
    options: {
      type: Array,
      default: () => []
    }
  },
  // watch: {
  //   options: {
  //     handler(val) {
  //       if (val) {
  //       }
  //     },
  //     immediate: true,
  //     deep: true
  //   },
      
  // },
  data() {
    return {}
  },
  computed: {
    // 转换绑定的选中数据，与v-model同步
    currentValue: {
      get: function () {
        return this.text || void 0
      },
      set: function (value) {
        this.$emit('input', value)
      },
    },
  },
  created() {},

  mounted() {},

  methods: {
    handleChange(val) {
      console.log(val)
      this.$emit('change', val)
    },
    getPopupContainer(triggerNode) {
      // triggerNode.parentNode
      return document.body
    },
  }
}
</script>
<style lang='less' scoped>
// /deep/.ant-select-selection {
//   border: none;
// }
</style>